<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        内容管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>文件详情
      </p>
      <div class="content">
        <div class="min">
          <div class="title">{{infos.resourceTitle}}</div>
          <div class="minCont">
            <div class="minContTitle">附件 1 个</div>
            <div class="flex">
              <div class="left">
                <img
                  src="../../assets/images/pdfIcon.png"
                  style="widthL35px;height:40px"
                  alt=""
                />
              </div>
              <div class="right">
                <div class="rightTitle">{{infos.resourceName}}</div>
                <div class="downloadFile" @click="downloadExportFile(infos.resourceUrl,infos.resourceName,'pdf')" style="margin-top:5px">下载</div>
              </div>
            </div>
          </div>
          <div>
              <el-button @click="back" type="primary" plain  size="mini" style="margin-top:20px">返回</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  base64ToFileOrBlob,
  saveFileToBlob,
  saveFileToLink,
} from "web-downloadfile";
import axios from "axios"
export default {
  data() {
    return {
      infos:""
    };
  },
  created() {
    this.getData()
  },
  methods: {
    back(){
      this.$router.go(-1)
    },
    getData(){
      let id = this.$route.query.id;
      axios.post("api/school/getSchoolResourseInfo",{id}).then(res=>{
        console.log(res)
        if(res.data.code=="0000"){
          console.log("回显信息")
          this.infos = res.data.data
        }else{
          layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
        }
      }).catch(err=>{
        console.log(err)
      })
    },


    downloadFiles() {
      window.open(
        "http://hkrt-jianxiao.oss-cn-beijing.aliyuncs.com/bssale_hk/1377214570141278209.pdf"
      );
    },
    /**
     * 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题
     * @param url  ：文件链接
     * @param fileName  ：文件名;
     * @param type  ：文件类型;
     */
    fileLinkToStreamDownload(url, fileName, type) {
      let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;
      if (!reg.test(url)) {
        throw new Error("传入参数不合法,不是标准的文件链接");
      } else {
        let xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        xhr.setRequestHeader("Content-Type", `application/${type}`);
        xhr.responseType = "blob";
        xhr.onload = function () {
          if (this.status == 200) {
            //接受二进制文件流
            var blob = this.response;
            downloadExportFile(blob, fileName, type);
          }
        };
        xhr.send();
      }
    },

    /**
     *下载导出文件
     * @param blob  ：返回数据的blob对象或链接
     * @param tagFileName  ：下载后文件名标记
     * @param fileType  ：文件类 word(docx) excel(xlsx) ppt等
     */
    downloadExportFile(blob, tagFileName, fileType) {
      let downloadElement = document.createElement("a");
      let href = blob;
      if (typeof blob == "string") {
        downloadElement.target = "_blank";
      } else {
        href = window.URL.createObjectURL(blob); //创建下载的链接
      }
      downloadElement.href = href;
      downloadElement.download =
        tagFileName +
        '11' +
        "." +
        fileType; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      if (typeof blob != "string") {
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    },
  },
};
</script>

<style scoped>
.min {
  width: 960px;
  margin: 0 auto;
  background: white;
  min-height: calc(100vh - 100px - 26px);
  box-sizing: border-box;
  padding: 20px;
}
.content {
  background: #f9fafc;
}
.right {
  padding-left: 5px;
}
.minContTitle {
  margin-bottom: 10px;
}
.flex {
  display: flex;
}
.title {
  color: #606266;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.downloadFile {
  color: #409eff;
  cursor: pointer;
}
</style>